<template>
	<view class="container">
		<!-- 头像 -->
		<view class="form-group" @click="showAvatarPreview">
			<view class="group-toux">
				<text>头像</text>
				<view class="toux-item">
					<image :src="newAvatarPath" mode="aspectFill" style="width: 30px; height: 30px;" />
					<image src="/static/image/箭头 左 小.png" mode=""
						style="width: 20px; height: 20px; margin-left: 10px;" />
				</view>
			</view>
		</view>
		<!-- 用户名 -->
		<view class="form-group" @click="showEditNameModal">
			<view class="group-toux">
				<text>名字</text>
				<view class="toux-item">
					<text class="username-text">{{ newUsername }}</text>
					<image src="/static/image/箭头 左 小.png" mode="" style="width: 20px; height: 20px; margin-left: 10px;">
					</image>
				</view>
			</view>

		</view>
		<!-- 修改用户名弹窗 -->
		<uni-popup ref="namePopup" type="dialog">
			<view class="popup-content">
				<input v-model="newUsername" placeholder="请输入新用户名" class="popup-input" />
				<view class="popup-buttons">
					<button @click="$refs.namePopup.close()">取消</button>
					<button type="primary" @click="saveNewName">确定</button>
				</view>
			</view>
		</uni-popup>
		<!-- 头像大图预览弹窗 -->
		<uni-popup ref="avatarPopup" type="center">
			<view class="avatar-preview-popup">
				<image :src="newAvatarPath" mode="widthFix" class="popup-avatar" />
				<view class="overlay">
					<image src="/static/image/省略号.png" class="edit-icon-popup" @click="chooseAvatar" mode="aspectFit" />
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			const storedUserInfo = uni.getStorageSync('userInfo');
			return {
				newAvatarPath: storedUserInfo?.avatar || '../../static/image/头像.png',
				newUsername: storedUserInfo?.username || 'KT猫'
			};
		},
		methods: {
			// 显示大图预览弹窗
			showAvatarPreview() {
				this.$refs.avatarPopup.open();
			},
			// 打开头像详情（可选扩展，目前只是样式展示）
			showAvatarDetail() {
				// 可以在这里做更多事情，比如放大查看、删除等

			},

			// 更换头像
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.newAvatarPath = res.tempFilePaths[0];
						this.saveChanges();
					}
				});
				this.$refs.avatarPopup.close(); // 关闭弹窗
			},
			// 弹出修改用户名弹窗
			showEditNameModal() {
				this.$refs.namePopup.open();
			},
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.newAvatarPath = res.tempFilePaths[0];
					}
				});
			},
			// 弹窗中点击“确定”
			saveNewName() {
				this.saveChanges();
				this.$refs.namePopup.close();
			},

			// 保存所有更改到本地缓存
			saveChanges() {
				const updatedInfo = {
					avatar: this.newAvatarPath,
					username: this.newUsername
				};

				uni.setStorageSync('userInfo', updatedInfo);
			}
		}
	};
</script>
<style>
	.group-toux {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx;
		background-color: #fff;
		font-size: 18px;
	}

	.toux-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.form-group {
		margin-bottom: 5rpx;
		background-color: #fff;
		padding: 20rpx;
		box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.1);
	}

	.avatar-preview {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.edit-icon {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		z-index: 10;
		border-radius: 50%;
		background-color: #fff;
	}

	.username-text {
		color: #333;
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	/* 弹窗样式 */
	.popup-content {
		background-color: #fff;
		padding: 40rpx;
		border-radius: 10rpx;
		width: 600rpx;
	}

	.popup-input {
		width: 100%;
		border: 1px solid #ddd;
		padding: 20rpx;
		margin-bottom: 30rpx;
		border-radius: 8rpx;
	}

	.popup-buttons {
		display: flex;
		justify-content: space-between;
	}

	/* 头像大图弹窗 */
	.avatar-preview-popup {
		position: relative;
		width: 600rpx;
		height: auto;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.popup-avatar {
		width: 100%;
	}

	/* 弹窗整体样式 */
	.avatar-preview-popup {
		position: relative;
		width: 600rpx;
		/* 根据实际需要调整 */
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
		/* 添加阴影效果 */
		background-color: rgba(255, 255, 255, 0.9);
		/* 背景颜色可选 */
	}

	/* 图片样式 */
	.popup-avatar {
		width: 100%;
		display: block;
		/* 确保没有额外的空白 */
	}

	/* 覆盖层用于放置编辑图标 */
	.overlay {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		padding: 20rpx;
		/* 给图标周围留点空间 */
		box-sizing: border-box;
	}

	.edit-icon-popup {
		width: 50rpx;
		height: 50rpx;
		z-index: 10;
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
	}
</style>